<!-- 首页 -->
<template>
	<div class="page_wrap">
		<header>
			<div class="h_left"></div>
			<div class="h_center">
				<div class="input_box">
					<i class="iconfont iconsearch"></i>
					<span>输入关键字~</span>
				</div>
			</div>
			<div class="h_right">
				<img src="../../assets/images/userCenter/nav_icon_message_normal@2x.png" @click="toPage('message')" />
			</div>
		</header>

		<div class="main" v-if="">
			<template v-for="(x, indexX) in dataList">
				<Ad v-if="x.itemName=='ad'"></Ad>
				<Home1 v-if="x.itemName=='home1'"></Home1>
				<Home2 v-if="x.itemName=='home2'"></Home2>
				<Home3 v-if="x.itemName=='home3'"></Home3>
				<Home4 v-if="x.itemName=='home4'"></Home4>
				<Home5 v-if="x.itemName=='home5'"></Home5>
			</template>

			<GuessYouLike></GuessYouLike>
		</div>

		<!-- 回到顶部 -->
		<goBackTop></goBackTop>
	</div>
</template>

<script>
	import { getPositionY, smoothScrollTop, topWindScrollY, } from "@/assets/js/utils/utils.js";
	import { Toast, ActionSheet } from 'vant';
	import goBackTop from "@/components/goBackTop/goBackTop"; //回到顶部
	import GuessYouLike from '@/components/guessYouLike/guessYouLike';
	import Ad from '@/components/themes/ad';
	import Home1 from '@/components/themes/home1';
	import Home2 from '@/components/themes/home2';
	import Home3 from '@/components/themes/home3';
	import Home4 from '@/components/themes/home4';
	import Home5 from '@/components/themes/home5';

	export default {
		data() {
			return {
				dataList: [],
			};
		},
		watch: {},
		computed: {},
		components: {
			goBackTop,
			GuessYouLike,
			Ad,
			Home1,
			Home2,
			Home3,
			Home4,
			Home5,
		},
		beforeRouteEnter(to, from, next) {
			next();
			//setTimeout(() => topWindScrollY(to.meta.scrollTop), 50)
		},
		beforeRouteLeave(to, from, next) {
			next();
		},
		activated() {},
		deactivated() {},
		created() {},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.dataList = [{
					itemName: 'ad',
					itemList: [],
				}, {
					itemName: 'home1',
					itemList: [],
				}, {
					itemName: 'home5',
					itemList: [],
				}, {
					itemName: 'home1',
					itemList: [],
				}, {
					itemName: 'home2',
					itemList: [],
				}, {
					itemName: 'home1',
					itemList: [],
				}, {
					itemName: 'home3',
					itemList: [],
				}, {
					itemName: 'home1',
					itemList: [],
				}, {
					itemName: 'home4',
					itemList: [],
				}];
			},
			toPage(item) {
				if(item = 'message') {
					this.$router.push({
						name: 'message'
					})
				}
			},
		}
	}
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.page_wrap {
		width: 100%;
		background: #fff;
	}
	
	//header
	header {
		.h_center {
			width: 85%;
			.input_box {
				flex: 1;
				height: rem(60);
				background: #fff;
				border-radius: rem(60);
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 rem(20);
				i {
					font-size: rem(36);
					color: #999;
				}
				span {
					color: #999;
					margin: 0 0 0 rem(10);
				}
			}
		}
		.h_right {
			img {
				width: rem(36);
			}
		}
	}
	
	//main
	.main {
		padding: rem(90) 0 rem(200) 0;
	}
</style>